<template>
  <div class="royole-tag">
    <div class="royole-tag__left">
      <div class="royole-tag__left__item first"><span class="royole-tag__left__item__pre">#</span> 探索柔宇星球</div>
      <div class="royole-tag__left__item second">
        <img
          src="../assets//images/icons/icon_royole_group.png"
          alt="logo"
          class="royole-tag__left__item__img"
        />这是柔宇圈子
      </div>
    </div>
    <div class="royole-tag__right">
      <div class="royole-tag__right__item">
        <img class="royole-tag__right__item__img" src="../assets/images/icons/icon_views_normal.png" alt="logo" />
        <span>{{ info.views }}</span>
      </div>
      <div class="royole-tag__right__item">
        <img class="royole-tag__right__item__img" src="../assets/images/icons/icon_comment_normal.png" alt="logo" />
        <span> {{ info.comments }}</span>
      </div>
      <div class="royole-tag__right__item">
        <img
          class="royole-tag__right__item__img"
          :src="isThumbs ? thumbsClickPng : thumbsNomalPng"
          alt="logo"
          @click="isThumbs = !isThumbs"
        />
        <span>{{ info.thumbs }}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "RoyoleTag",
  props: {
    info: {
      type: Object,
      default: () => {
        return {
          views: 115,
          comments: 1078,
          thumbs: 2089,
        };
      },
    },
  },
  data() {
    return {
      isThumbs: false,
      thumbsNomalPng: require("../assets//images/icons/icon_thumbs_up_normal.png"),
      thumbsClickPng: require("../assets//images/icons/icon_thumbs_up_pressed.png"),
    };
  },
};
</script>
<style scoped lang="scss">
.royole-tag {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 24px;
  &__left {
    display: flex;
    &__item {
      margin-right: 8px;
      height: 24px;
      display: flex;
      align-items: center;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 500;
      padding: 10px;
      &__pre {
        max-height: 20px;
        padding-right: 5px;
      }
      &__img {
        width: 15px;
        margin-right: 5px;
      }
    }
    .first {
      background: rgba(0, 80, 255, 0.1);
      color: rgba(0, 80, 255, 0.6);
      .royole-tag__left__item__pre {
        color: rgba(0, 80, 255, 0.6);
      }
    }
    .second {
      background: rgba(255, 110, 0, 0.1);
      color: rgba(255, 110, 0, 0.6);
    }
  }
  .royole-tag__right {
    display: flex;
    &__item {
      display: flex;
      align-items: center;
      margin-right: 27px;
      font-weight: 300;
      font-size: 12px;
      opacity: 0.6;
      &__img {
        padding-right: 2px;
        max-height: 19px;
      }
    }
  }
}
</style>
